<template>
  <div class="container">
    <!-- 顶部栏 -->
    <g-header></g-header>
    <!-- 广告 -->
    <g-banner1 :img="data.ad.flash_img"></g-banner1>
    <!-- 主要内容 -->
    <div class="main-container">
      <!-- 导航栏 -->
      <g-nav :nav="data.detail.nav" :name="data.detail.belone_menu"></g-nav>
      <div class="content-container">
        <!-- 标题栏，有当前目录的名字和面包屑 -->
        <div class="title-container">
          <!-- 标题 -->
          <p class="title">{{data.detail.detail.news_title}}</p>
          <!-- 面包屑 -->
          <div class="hidden-in-xs breadcrumb">
            <span>当前位置：</span>
            <span>美梦首页></span>
            <span v-for="(item,index) in breadcrumb" :key="index">{{item.cate_name}}{{index==data.detail.breadcrumb.length-1?'':'>'}}</span>
          </div>
        </div>
        <!-- 文章详情 -->
        <div class="content">
          <div v-html="data.detail.detail.news_content"></div>
          <div class="brace"></div>
        </div>
      </div>
    </div>

    <!-- 底部栏 -->
    <g-footer></g-footer>
  </div>
</template>
<script>
  import header from '@/components/header'
  import banner1 from '@/components/banner1'
  import nav from '@/components/nav'
  import footer from '@/components/footer'
  export default {
    components: {
      'g-header': header,
      'g-banner1': banner1,
      'g-nav': nav,
      'g-footer': footer
    },
    data() {
      return {
        data: {}
      }
    },
    computed: {
      /**
       * @function 重新排序面包屑，后台传过来的是倒序
       */
      breadcrumb: function () {
        return this.data.detail.breadcrumb.reverse()
      },
    },
    created: function () {
      let that = this;
      this.$axios.get(this.$api+'/api/page?uid=' + that.$route.params.id).then(function (response) {
          that.data = response.data
        })
        .catch(function () {

        });
    }
  }

</script>
<style lang="less" scoped>
  @import url('../style/mixin.less');
  .main-container {
    width: 1200px;
    margin: 60px auto 0;
    .On-xs( {
      width: calc(100% - 20px);
      margin: 0 10px;
    }
    );
    .content-container {
      width: 900px;
      margin-left: 20px;
      float: left;
      margin-bottom: 65px;
      .On-xs( {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
      }
      );
      .title-container {
        border-bottom: 4px solid #a17657;
        height: 76px;
        .On-xs( {
          height: 40px;
          border-bottom: 2px solid #a17657;
        }
        );
        .title {
          float: left;
          height: 76px;
          line-height: 76px;
          font-family: MicrosoftYaHei;
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #543e2e;
          font-weight: bold;
          .On-xs( {
            font-size: 14px;
            line-height: 40px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #543e2e;
            height: 40px;
          }
          );
        }
        .breadcrumb {
          float: right;
          line-height: 76px;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #a17656;
          span:last-child {
            color: #543e2e;
          }
        }
      }
      .content {
        width: 100%;
        text-align: left;
        .On-xs( {
          border-bottom: 2px solid #a17657;
          margin-bottom: 20px;
        }
        );
        .brace {
          height: 20px;
          width: 100%;
        }
      }
    }
  }

</style>
